<template>
  <div @keydown.enter.stop="search" class="relation-selector-search-wrapper">
    <RelationSelectorSearchForm ref="RelationSelectorSearchForm" v-model="searchModel" :formDefinition="formDefinition" :manual="manual"/>
    <RelationSelectorSearchButton @search="search" @reset="reset"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {createManual} from '@comp/hhd/design/relation/types';
import RelationSelectorSearchButton
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/search/RelationSelectorSearchButton.vue';
import RelationSelectorSearchForm
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/search/RelationSelectorSearchForm.vue';
import {createQueryParamsFormSimpleModel} from '@views/formMenuView/search/QueryUtil';

export default {
  name: 'RelationSelectorSearch',
  components: {RelationSelectorSearchForm, RelationSelectorSearchButton},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    manual: createProps(Object, createManual),
  },
  data() {
    return {
      searchModel: undefined,
    };
  },
  methods: {
    reset() {
      this.searchModel = undefined;
      this.$nextTick(() => {
        this.search();
      })
    },
    getParams() {
      let field = this.$refs.RelationSelectorSearchForm.getRealFields().map(item => ({
        ...item,
        fieldId: item.id
      }));
      return createQueryParamsFormSimpleModel(this.searchModel, field, this.formDefinition);
    },
    search() {
      this.$emit('search', this.getParams());
    },
  }
};
</script>
<style>
.relation-selector-search-wrapper {
  display: flex;
  padding: 5px;
}

</style>